<template>
    <div class="property-panel" ref="propertyPanel">
        <el-tabs type="border-card" style="height: calc(100vh - 180px)">
            <el-tab-pane label="基本属性">
                <el-form :model="process" :rules="processFormRules" ref="processForm" label-width="80px" size="small">
                    <el-form-item label="流程分类" prop="category">
                        <el-select v-model="process.category" placeholder="请选择">
                            <el-option v-for="item in categories" :key="item.value" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="流程名称" prop="processName">
                        <el-input v-model="process.processName"></el-input>
                    </el-form-item>
                    <el-form-item label="流程Key" prop="key">
                        <el-input v-model="process.key"></el-input>
                    </el-form-item>
                    <el-form-item label="流程描述" prop="description">
                        <el-input type="textarea" :rows="3" v-model="process.description" resize="none"
                                  :maxlength="150"></el-input>
                    </el-form-item>
                </el-form>
                <el-form :model="modelForm" ref="modelForm" label-width="80px" size="small">
                    <el-form-item label="节点定义" v-if="element">
                        <el-input v-model="modelForm.id" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="节点名称" v-if="element">
                        <el-input v-model="modelForm.name" @input="nameChange"></el-input>
                    </el-form-item>
                   <!-- <el-form-item label="节点颜色" v-if="element">
                        <el-color-picker v-model="modelForm.color" @active-change="colorChange"></el-color-picker>
                    </el-form-item>-->
                    <!-- 任务节点允许选择人员 -->
                    <el-form-item label="节点人员" v-if="userTask">
                        <el-select v-model="modelForm.userType" placeholder="请选择" @change="typeChange">
                            <el-option value="assignee" label="指定人员"></el-option>
                            <el-option value="candidateUsers" label="候选人员"></el-option>
                            <el-option value="candidateGroups" label="角色/岗位"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 指定人员 -->
                    <el-form-item label="指定人员" v-if="userTask && modelForm.userType === 'assignee'">
                        <el-select v-model="modelForm.assignee" placeholder="请选择" key="1"
                                   @change="(value) => addUser({assignee: value})">
                            <el-option v-for="item in users" :key="item.id" :label="item.name"
                                       :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 候选人员 -->
                    <el-form-item label="候选人员" v-else-if="userTask && modelForm.userType === 'candidateUsers'">
                        <el-select v-model="modelForm.candidateUsers" placeholder="请选择" key="2" multiple
                                   @change="(value) => addUser({candidateUsers: value.join(',') || value})">
                            <el-option v-for="item in users" :key="item.id" :label="item.name"
                                       :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 角色/岗位 -->
                    <el-form-item label="角色/岗位" v-else-if="userTask && modelForm.userType === 'candidateGroups'">
                        <el-select v-model="modelForm.candidateGroups" placeholder="请选择"
                                   @change="(value) => addUser({candidateGroups: value})">
                            <el-option v-for="item in roles" :key="item.id" :label="item.name"
                                       :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 分支允许添加条件 -->
                    <el-form-item label="分支条件" v-if="sequenceFlow">
                        <el-select v-model="modelForm.user" placeholder="请选择">
                            <el-option v-for="item in users" :key="item.value" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    export default {
        name: "PropertyPanel",
        props: {
            modeler: {
                type: Object,
                required: true
            },
            rowData: {
                type: Object,
                required: true
            }
        },
        computed: {
            userTask() {
                if (!this.element) {
                    return;
                }
                return this.element.type === "bpmn:UserTask";
            },
            sequenceFlow() {
                if (!this.element) {
                    return;
                }
                return this.element.type === "bpmn:SequenceFlow";
            }
        },
        data() {
            return {
                modelForm: {
                    id: "",
                    name: "",
                    color: null
                },
                process: {
                    processName: '',
                    key: '',
                    category: '',
                    description: ''
                },
                processFormRules: {
                    category: [{required: true, message: '请选择分类', trigger: 'blur'}],
                    processName: [{required: true, message: '请输入流程名称', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}],
                    key: [{required: true, message: '请输入流程key', trigger: 'blur'}]
                },
                categories: [
                    {
                        value: "apply holiday",
                        label: "请假"
                    },
                    {
                        value: "bx",
                        label: "报销"
                    }
                ],
                element: {},
                users: [],
                roles: []
            };
        },
        mounted() {
            this.handleModeler();
            this.loadUserList();
            this.loadRoseList();
            //赋值流程基本属性
            if (Object.keys(this.rowData).length > 0) {
                this.process = {
                    processName: this.rowData.name,
                    key: this.rowData.key,
                    category: this.rowData.category,
                    description: JSON.parse(this.rowData.metaInfo).description
                };
            }
        },
        methods: {
            //加载人员列表
            loadUserList() {
                this.$httpGet(this.$axiosBaseHttp, "api/rest/userInfo/list", {}).then(res => {
                    if (res.code === 200) {
                        this.users = res.data;
                    }
                })
            },
            //加载角色
            loadRoseList() {
                this.$httpGet(this.$axiosBaseHttp, "api/rest/roleInfo/list", {}).then(res => {
                    if (res.code === 200) {
                        this.roles = res.data;
                    }
                });
            },
            handleSave() {
                this.$emit("handleCallConfigBack", this.processName)
            },
            handleModeler() {
                // 监听节点选择变化
                this.modeler.on("selection.changed", e => {
                    const element = e.newSelection[0];
                    this.element = element;
                    if (element) {
                        this.modelForm = {
                            ...element.businessObject,
                            ...element.businessObject.$attrs
                        };
                        if (this.modelForm.userType === "candidateUsers") {
                            this.modelForm["candidateUsers"] = this.modelForm["candidateUsers"].split(",") || [];
                        }
                    } else {
                        this.modelForm = {};
                    }

                });

                //  监听节点属性变化
                this.modeler.on("element.changed", e => {
                    const {element} = e;
                    if (!element) return;
                    //  新增节点需要更新回属性面板
                    if (element.id === this.modelForm.id) {
                        this.modelForm.name = element.businessObject.name;
                        this.modelForm = {...this.modelForm};
                    }
                });
            },
            // 属性面板名称，更新回流程节点
            nameChange(name) {
                if (!this.element) return;
                const modeling = this.modeler.get("modeling");
                modeling.updateLabel(this.element, name);
            },
            // 属性面板颜色，更新回流程节点
            colorChange(color) {
                const modeling = this.modeler.get("modeling");
                modeling.setColor(this.element, {
                    fill: null,
                    stroke: color
                });
                modeling.updateProperties(this.element, {color: color});
            },
            // 任务节点配置人员
            addUser(properties) {
                this.updateProperties(
                    properties
                    // Object.assign(properties, {
                    //     userType: Object.keys(properties)[0]
                    // })
                );
            },
            // 切换人员类型
            typeChange() {
                const types = ["assignee", "candidateUsers", "candidateGroups"];
                types.forEach(type => {
                    delete this.element.businessObject.$attrs[type];
                    delete this.modelForm[type];
                });
            },
            // 在这里我们封装一个通用的更新节点属性的方法
            updateProperties(properties) {
                const modeling = this.modeler.get("modeling");
                modeling.updateProperties(this.element, properties);
            }
        }
    };
</script>

<style lang="scss" scoped>
</style>
